<template>
  <div class="video-card" @click="handleCardClick">
    <div class="video-thumbnail">
      <img 
        :src="video.thumbnail" 
        alt="视频封面" 
        class="thumbnail-img"
        loading="lazy"
        @error="handleImageError"
      >
      <div class="video-duration">{{ formatDuration(video.duration) }}</div>
      <div class="video-stats">
        <span class="video-views">{{ formatNumber(video.views) }} 播放</span>
        <span v-if="video.bulletCount" class="video-bullet">
          <i class="fa fa-commenting-o"></i>
          {{ formatNumber(video.bulletCount) }}
        </span>
      </div>
      <div class="video-overlay">
        <div class="play-button">
          <i class="fa fa-play"></i>
        </div>
      </div>
      <div v-if="video.badge" class="video-badge">
        {{ video.badge }}
      </div>
    </div>
    <div class="video-info">
      <h3 class="video-title">
        <span v-if="video.top" class="top-tag">置顶</span>
        {{ video.title }}
      </h3>
      <div v-if="video.tags && video.tags.length > 0" class="video-tags">
        <span v-for="(tag, index) in video.tags.slice(0, 3)" :key="index" class="tag-item">
          {{ tag }}
        </span>
        <span v-if="video.tags.length > 3" class="tag-more">
          +{{ video.tags.length - 3 }}
        </span>
      </div>
      <div class="video-meta">
        <div class="author-info">
          <img 
            :src="video.authorAvatar" 
            alt="作者头像" 
            class="author-avatar"
            @error="handleAvatarError"
          >
          <div v-if="video.authorOfficial" class="author-badge">
            <i class="fa fa-check-circle"></i>
          </div>
        </div>
        <div class="meta-details">
          <div class="author-line">
            <span class="author-name">{{ video.author }}</span>
            <span v-if="video.authorLevel" class="author-level">Lv.{{ video.authorLevel }}</span>
          </div>
          <div class="video-stats-bottom">
            <span v-if="video.likes" class="video-likes">
              <i class="fa fa-thumbs-up"></i>
              {{ formatNumber(video.likes) }}
            </span>
            <span class="video-date">{{ formatRelativeDate(video.date) }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { useRouter } from 'vue-router'
import logoImage from '@/assets/logo.png'

export default {
  name: 'VideoCard',
  props: {
    video: {
      type: Object,
      required: true,
      default: () => ({
        id: 1,
        title: '哔哩哔哩视频示例',
        thumbnail: logoImage,
        duration: 3600,
        views: 105000,
        likes: 5200,
        bulletCount: 1200,
        author: 'B站UP主',
        authorAvatar: logoImage,
        authorOfficial: false,
        authorLevel: 5,
        date: '2024-01-15',
        tags: ['示例', '测试', '演示'],
        badge: null,
        top: false,
      }),
    },
  },
  setup() {
    const router = useRouter()
    return { router }
  },
  methods: {
    // 格式化视频时长
    formatDuration(seconds) {
      if (!seconds || seconds < 0) return '00:00'
      const hours = Math.floor(seconds / 3600)
      const minutes = Math.floor((seconds % 3600) / 60)
      const secs = seconds % 60
      
      if (hours > 0) {
        return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
      } else {
        return `${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
      }
    },
    
    // 格式化数字（支持万和亿）
    formatNumber(num) {
      if (!num || num < 0) return '0'
      if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
      } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
      } else if (num >= 1000) {
        return (num / 1000).toFixed(1) + 'k'
      }
      return num.toString()
    },
    
    // 格式化相对日期
    formatRelativeDate(dateStr) {
      if (!dateStr) return ''
      
      const date = new Date(dateStr)
      const now = new Date()
      const diffTime = Math.abs(now - date)
      const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24))
      
      if (diffDays < 1) {
        const diffHours = Math.floor(diffTime / (1000 * 60 * 60))
        if (diffHours < 1) {
          const diffMinutes = Math.floor(diffTime / (1000 * 60))
          return diffMinutes < 1 ? '刚刚' : diffMinutes + '分钟前'
        }
        return diffHours + '小时前'
      } else if (diffDays < 7) {
        return diffDays + '天前'
      } else if (diffDays < 30) {
        const weeks = Math.floor(diffDays / 7)
        return weeks + '周前'
      } else if (diffDays < 365) {
        const months = Math.floor(diffDays / 30)
        return months + '个月前'
      } else {
        return date.getFullYear() + '-' + 
          String(date.getMonth() + 1).padStart(2, '0') + '-' + 
          String(date.getDate()).padStart(2, '0')
      }
    },
    
    // 点击卡片处理
    handleCardClick() {
      this.router.push(`/video/${this.video.id}`)
    },
    
    // 处理图片加载错误
    handleImageError(event) {
      // 图片加载失败时使用默认封面
      event.target.src = logoImage
      // 添加错误状态类，用于添加特殊样式
      event.target.classList.add('image-error')
    },
    handleAvatarError(event) {
      // 头像加载失败时使用默认头像
      event.target.src = logoImage
    },
  },
}
</script>

<style scoped>
/* 视频卡片容器 */
.video-card {
  width: 100%;
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  border: 1px solid transparent;
}

/* 鼠标悬停效果 */
.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
  border-color: #f0f0f0;
}

/* 视频卡片容器样式 */
.video-card {
  background-color: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* 视频缩略图样式 */
.video-thumbnail {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: linear-gradient(135deg, #FB7299 0%, #23ADE5 100%);
  border-radius: 12px 12px 0 0;
  overflow: hidden;
}

/* 缩略图容器，增强视觉效果 */
.thumbnail-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* 视频封面图片 */
.thumbnail-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.video-card:hover .thumbnail-img {
  transform: scale(1.05);
}

/* 图片加载错误时的样式 */
.thumbnail-img.image-error {
  filter: grayscale(50%);
}

/* 缩略图渐变遮罩 */
.thumbnail-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(0,0,0,0) 60%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
}

/* 视频时长 */
.video-duration {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  z-index: 10;
  backdrop-filter: blur(2px);
}

/* 视频统计信息 */
.video-stats {
  position: absolute;
  bottom: 10px;
  left: 10px;
  display: flex;
  gap: 8px;
  font-size: 12px;
  color: white;
  z-index: 10;
}

.video-views,
.video-bullet {
  display: flex;
  align-items: center;
  gap: 4px;
  background-color: rgba(0, 0, 0, 0.7);
  padding: 3px 8px;
  border-radius: 6px;
  backdrop-filter: blur(2px);
}

/* 悬停时显示的覆盖层 */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 5;
}

.video-card:hover .video-overlay {
  opacity: 1;
}

/* 播放按钮 */
.play-button {
  width: 56px;
  height: 56px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 24px;
  transform: scale(0.9);
  transition: all 0.3s ease;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

.play-button i {
  margin-left: 3px;
}

.video-card:hover .play-button {
  transform: scale(1);
  background-color: rgba(251, 114, 153, 0.95);
}

/* 视频标签 */
.video-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background-color: #fb7299;
  color: white;
  padding: 3px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  z-index: 10;
}

/* UP主官方认证角标 */
.author-badge-overlay {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: rgba(35, 173, 229, 0.9);
  color: white;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 12px;
  display: flex;
  align-items: center;
  gap: 4px;
  z-index: 10;
  backdrop-filter: blur(2px);
}

/* 视频信息区域 */
.video-info {
  padding: 12px;
}

/* 视频标题 */
.video-title {
  font-size: 16px;
  font-weight: 600;
  color: #18191c;
  margin-bottom: 8px;
  line-height: 1.4;
  display: -webkit-box;
  display: box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  position: relative;
  padding-right: 40px;
}

/* 置顶标签 */
.top-tag {
  position: absolute;
  right: 0;
  top: 0;
  background-color: #ff6b81;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 500;
}

/* 视频标签 */
.video-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-bottom: 8px;
}

.tag-item {
  background-color: #f0f2f5;
  color: #606266;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  transition: all 0.3s ease;
}

.video-card:hover .tag-item {
  background-color: #ecf5ff;
  color: #409eff;
}

.tag-more {
  background-color: #f0f2f5;
  color: #909399;
  padding: 2px 6px;
  border-radius: 12px;
  font-size: 12px;
}

/* 视频元信息 */
.video-meta {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 作者信息 */
.author-info {
  position: relative;
  flex-shrink: 0;
}

/* 作者头像 */
.author-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f5f7fa;
}

/* 官方认证徽章 */
.author-badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background-color: white;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #1e88e5;
  border: 1px solid #e0e0e0;
}

/* 元信息详情 */
.meta-details {
  flex: 1;
  min-width: 0;
}

/* 作者行 */
.author-line {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

/* 作者名称 */
.author-name {
  font-size: 14px;
  color: #606266;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}

.video-card:hover .author-name {
  color: #409eff;
}

/* 作者等级 */
.author-level {
  font-size: 11px;
  color: #ff6b81;
  background-color: #fff2f0;
  padding: 1px 4px;
  border-radius: 8px;
}

/* 底部统计信息 */
.video-stats-bottom {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* 点赞数 */
.video-likes {
  font-size: 12px;
  color: #909399;
  display: flex;
  align-items: center;
  gap: 2px;
}

/* 视频日期 */
.video-date {
  font-size: 12px;
  color: #909399;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .video-title {
    font-size: 15px;
  }
}

@media (max-width: 992px) {
  .video-card {
    border-radius: 8px;
  }
  
  .video-title {
    font-size: 14px;
  }
}

@media (max-width: 768px) {
  .video-card {
    margin-bottom: 16px;
    border-radius: 8px;
  }
  
  .video-info {
    padding: 10px;
  }
  
  .video-title {
    font-size: 14px;
    padding-right: 35px;
  }
  
  .play-button {
    width: 48px;
    height: 48px;
    font-size: 20px;
  }
  
  .top-tag {
    font-size: 9px;
  }
}

@media (max-width: 480px) {
  .video-card {
    margin-bottom: 12px;
  }
  
  .video-info {
    padding: 8px;
  }
  
  .video-title {
    font-size: 13px;
    margin-bottom: 6px;
  }
  
  .video-tags {
    margin-bottom: 6px;
  }
  
  .tag-item {
    font-size: 11px;
    padding: 1px 6px;
  }
  
  .author-line {
    margin-bottom: 2px;
  }
  
  .author-name {
    font-size: 13px;
  }
  
  .video-likes,
  .video-date {
    font-size: 11px;
  }
}

/* 动画效果 */
@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* 视频徽章闪烁效果 */
.video-badge {
  animation: pulse 2s infinite;
}
</style>